<template>
  <div class="list">
    <template v-if="flag">
      <el-table :data="tableData">
        <el-table-column prop="id" label="id" width="140px"> </el-table-column>
        <el-table-column
          prop="name"
          label="图片名称"
          width="200px"
          height="100px"
        >
        </el-table-column>
        <el-table-column label="图片地址" prop="url" width="500px">
        </el-table-column>
        <el-table-column label="图片" width="400px">
          <template slot-scope="scope">
            <img :src="scope.row.url" alt="" class="img-list" />
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200px">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="amendImgs(scope.row)"
              >编辑</el-button
            >
            <el-button type="warning" @click="removeImgs(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-else>
      <h2 class="img-title">编辑图片</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="imgRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="图片名称" prop="name">
          <el-input v-model="ruleForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="图片名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图片地址" prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>
        <el-form-item label="图片类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="1">轮播图</el-radio>
            <el-radio label="2">待定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="HandleEditImgs">立即修改</el-button>
          <el-button @click="NoEditImgs">取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </div>
</template>
<script>
import { getImgs, deleteImgs, editImgs } from '@/api/publics'
export default {
  data() {
    return {
      tableData: [],
      size: 1000,
      num: null,
      min: 0,
      max: 10,
      currentPage: null,
      flag: true,
      ruleForm: {
        id: '',
        name: '',
        url: '',
        type: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        url: [{ required: true, message: '请输入图片地址', trigger: 'blur' }],
        resource: [
          { required: true, message: '请选择图片类型资源', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await getImgs()
      this.tableData = res.data.data
      this.tableData.forEach((item, index) => {
        switch (item.type) {
          case '1':
            this.tableData[index].type = '轮播图'
            break
          case '2':
            this.tableData[index].type = '待定'
            break
          default:
            break
        }
      })
    },
    removeImgs(id) {
      deleteImgs({ id: id }).then(() => {
        this.getData()
      })
    },
    amendImgs(data) {
      this.flag = false
      this.ruleForm.id = data.id
      this.ruleForm.name = data.name
      this.ruleForm.url = data.url
      this.ruleForm.type = '2'
    },
    HandleEditImgs() {
      editImgs(this.ruleForm).then(() => {
        this.flag = true
        this.getData()
      })
    },
    NoEditImgs() {
      this.flag = true
    }
  }
}
</script>
<style lang="scss">
.list {
  .cell {
    padding: 0 40px 0 0;
  }
  .img-list {
    width: 250px;
    height: 150px;
  }
  .img-title {
    margin-top: 10px;
    margin-bottom: 40px;
    text-indent: 20px;
  }
}
</style>